<template>
  <div class="storeBody wap">
    <div class="storeHead display-flex flex-direction-column">
      <div class="storeHeadTop display-flex flex-direction-row justify-content-flex-justify">
        <div class="storeHeadL display-flex flex-direction-row align-items-center justify-content-flex-justify">
          <img src="../../../assets/img/cart/back@2x.png" @click="goManage" alt="">
          <p @click="goShopInfo">{{shopInfo.name}}</p>
          <span class="callUser display-flex flex-direction-row align-items-center justify-content-flex-center"
                @click="goShopInfo">
              <span :style="{marginTop:this.$platform() == 1?'0.05rem':'0'}">商家详情</span>
            </span>
        </div>
        <div v-show="showShareBtn"
             class="storeHeadR display-flex flex-direction-row align-items-center justify-content-flex-justify">
          <img @click="showPopover" src="../../../assets/img/cart/add.png" alt="">
          <div v-show="popover" class="popover display-flex flex-direction-column">
            <div @click="shareLink" class="display-flex flex-direction-row align-items-center">
              <img style="margin: 0 .4rem;" src="../../../assets/img/cart/shareLink.png" alt="">
              <p>店铺链接</p>
            </div>
            <div @click="shareQR" class="display-flex flex-direction-row align-items-center">
              <img style="margin: 0 .4rem;" src="../../../assets/img/cart/QRCode.png" alt="">
              <p style="border-bottom: 1px solid #ffffff">店铺二维码</p>
            </div>

          </div>
        </div>
      </div>
      <div class="tongzhi" v-if="false" @click="goShopInfo"><img src="../../../assets/img/customer/tongzhi.png" alt=""><span>{{this.shopInfo.notice}}</span>
      </div>
      <div class="storeMiddle">
        <input class="searchInput" type="text" v-model="keyWord" :placeholder="searchIcon" readonly
               @click="searchInput()">
      </div>
      <!--新增 start-->
      <div class="storeHeadBottom display-flex new" :class="{active: activeStatus}">
        <div class="left" @click="selectTab(4)">
          <span class="selectIcon"></span>
          活动专区
        </div>
        <div class="right" v-if="current != ''">
          <div class="item" @click="switchTab('', -1)" :class="{active: -1 == secondCurrent}">全部</div>
          <div class="item" @click="switchTab(item.id, index)" :class="{active: index == secondCurrent}" v-for="(item, index) in goodsCategoryArr[current]['children']" :key="item.id">{{item.name}}</div>
        </div>
      </div>
      <!--新增 end-->
      <div class="storeHeadBottom display-flex flex-direction-row" v-if="false">
        <p class="display-flex flex-direction-row align-items-center justify-content-flex-center"
           :style="{color:(tabNum==3?'#FFFFFF':'#333333'),backgroundColor:(tabNum==3?'#527DD9':null)}">
          <span v-if="tabNum==3" :style="{marginTop:this.$platform() == 1?'0.1rem':'0'}">商品分类</span>
          <span v-else @click="selectTab(3)" :style="{marginTop:this.$platform() == 1?'0.1rem':'0'}">商品分类</span>
        </p>
        <p class="display-flex flex-direction-row align-items-center justify-content-flex-center"
           :style="{color:(tabNum==1?'#FFFFFF':'#333333'),backgroundColor:(tabNum==1?'#527DD9':null)}">
          <span v-if="tabNum==1" :style="{marginTop:this.$platform() == 1?'0.1rem':'0'}">销量</span>
          <span v-else @click="selectTab(1)" :style="{marginTop:this.$platform() == 1?'0.1rem':'0'}">销量</span>
        </p>
        <p class="display-flex flex-direction-row align-items-center justify-content-flex-center"
           :style="{color:(tabNum==2?'#FFFFFF':'#333333'),backgroundColor:(tabNum==2?'#527DD9':null)}">
          <span v-if="tabNum==2" :style="{marginTop:this.$platform() == 1?'0.1rem':'0'}">新品</span>
          <span v-else @click="selectTab(2)" :style="{marginTop:this.$platform() == 1?'0.1rem':'0'}">新品</span>
        </p>
        <p class="display-flex flex-direction-row align-items-center justify-content-flex-center"
           :style="{color:(tabNum==4?'#FFFFFF':'#333333'),backgroundColor:(tabNum==4?'#527DD9':null)}">
          <span v-if="tabNum==4" :style="{marginTop:this.$platform() == 1?'0.1rem':'0'}">活动专区</span>
          <span v-else @click="selectTab(4)" :style="{marginTop:this.$platform() == 1?'0.1rem':'0'}">活动专区</span>
        </p>
      </div>
    </div>

    <div class="storeContent main">
      <div class="tab3 display-flex flex-direction-row">
        <scroller style="width: 1.66rem;background-color: #F7F7F7;" :on-refresh="refresh1"
                  :on-infinite="infinite1" ref="my_scroller_tab3Left" :noDataText="''">
          <div class="tab3L" style="overflow-y: auto">
            <p v-for="(item,index) in goodsCategoryArr" :key="index" @click="selectTab3Items(item.id, index)"
               class=" display-flex flex-direction-row align-items-center"
               :style="{backgroundColor:(selectTab3Item==item.id)?'#FFFFFF':null,color:(selectTab3Item==item.id)?'#222222':'#333333',fontWeight:(selectTab3Item==item.id)?'bold':null}">
              <span :style="{backgroundColor:(selectTab3Item==item.id)?'#527DD9':'#F7F7F7'}" class="selectIcon"></span>
              <span>{{item.name}}</span>
            </p>
          </div>
        </scroller>
        <scroller style="margin-left: 1.66rem" class="tab3R"
                  :on-refresh="refresh" :on-infinite="infinite" ref="my_scroller_tab1"
                  :noDataText="this.$noData(tabDataArr)" @on-scroll="tabScroll">
          <div class="right" v-if="secondCurrent != -1 && goodsCategoryArr[current]['children'] && goodsCategoryArr[current]['children'][secondCurrent]['children']">
            <div class="item" @click="switchTabThree('', -1)" :class="{active: -1 == threeCurrent}">全部</div>
            <div class="item" @click="switchTabThree(item.id, index)" :class="{active: index == threeCurrent}" v-for="(item, index) in goodsCategoryArr[current]['children'][secondCurrent]['children']" :key="item.id">{{item.name}}</div>
          </div>
          <good-item-two :list="tabDataArr" @collect="collect" :shopZeroSaleState="shopZeroSaleState" :tabNum="tabNum"></good-item-two>
        </scroller>
      </div>
    </div>
  </div>
</template>

<script>
  import {Storage} from "../../../service/storage";
  import goodItemTwo from "../../../components/good-item-two.vue"
  import tab from '../../../components/tab.vue';
  import {Popover} from 'vux'

  export default {
    name: "storePage",
    components: {
      tab,
      Popover,
      goodItemTwo
    },
    data() {
      return {
        shopId: '',
        shopInfo: {},
        searchIcon: '\ue630 请输入商品名称查找商品',
        keyWord: '',
        tabNum: 3,
        hisTabNum: 3,
        tab3LHeight: '',
        selectTab3Item: null,
        orderType: 0,
        goodsCategoryId: '',
        goodsName: '',
        pageNum: 1,
        goodsCategoryArr: [
          {
            children: [
              {
                children: []
              }
            ]
          }
        ],
        tabDataArr: [],
        popover: false,
        showShareBtn: false,
        linkURL: '',
        noData: true,
        shopZeroSaleState: null,
        isLoad: false,
        fromManage: 0,
        isScroll: true,
        current: 0, // 当前选中的一级分类索引
        secondCurrent: -1,
        threeCurrent: -1,
        activeStatus: false
      }
    },

    beforeRouteLeave(to, from, next) {//记录离开时的位置
      let currentPosition = this.$refs.my_scroller_tab1 && this.$refs.my_scroller_tab1.getPosition() && this.$refs.my_scroller_tab1.getPosition().top;
      //console.log("leave" + this.tabNum, currentPosition)
      if (this.tabNum == 1) {
        sessionStorage.tab1ContentP = currentPosition ? currentPosition : 0;
      } else if (this.tabNum == 2) {
        sessionStorage.tab2ContentP = currentPosition ? currentPosition : 0;
      } else if (this.tabNum == 3) {

        sessionStorage.tab3ContentP = currentPosition ? currentPosition : 0;
        let position = this.$refs.my_scroller_tab3Left && this.$refs.my_scroller_tab3Left.getPosition() && this.$refs.my_scroller_tab3Left.getPosition().top;
        sessionStorage.tab3Positon = position ? position : 0;
      } else {
        sessionStorage.tab4ContentP = currentPosition ? currentPosition : 0;
      }
      next()
    },

    created() {

      //console.log("store created")
      // let id = this.$route.query.id;
      if (this.$fromApp(this)) {
        this.showShareBtn = true
        this.tab3LHeight = (document.body.clientHeight * 2 / 100 - 3.75) + 'rem';
      } else {
        this.showShareBtn = false
        this.tab3LHeight = (document.body.clientHeight * 2 / 100 - 3.71) + 'rem';
        Storage.set('sellerId', this.$route.query.id);
      }
      if (this.$route.query && this.$route.query.Authorization && (this.$route.query.Authorization != "" || this.$route.query.Authorization != null || this.$route.query.Authorization != undefined)) {
        Storage.set("token", this.$route.query.Authorization);
      }
      this.shopId = this.$route.query.id;
      this.fromManage = this.$route.query.fromManage ? this.$route.query.fromManage : 0;
      this.linkURL = this.$webUrl + 'purchase/storePage?id=' + this.$route.query.id;

      setTimeout(() => {
        //统计进入店铺的买家
        this.$ajax.get('replenish/visit/shop', res => {
          // console.log(res);
          if (res.code == "10005") { //获取用户信息，判断是否完善信息
            if (!this.$fromApp(this)) {
              this.$vux.toast.text("基础信息未完善", 'middle');
              setTimeout(() => {
                this.$router.push({path: '/shop/manage', query: {type: 1}})
                return;
              }, 1000)
              return;
            }
          }
        }, {sellerId: this.$route.query.id});

        //获取经销商信息
        this.$ajax.get('common/distributor/info', res => {
          if (res.code == '200' && res.data) {
            //console.log('经销商信息：', res)
            this.shopInfo = res.data;
            this.shopZeroSaleState = res.data.zeroSaleFlag
          }
        }, {distributorId: this.$route.query.id});


        // if (sessionStorage.goodsCategoryArr) {
        //   this.goodsCategoryArr = JSON.parse(sessionStorage.goodsCategoryArr)
        //   this.selectTab3Item = sessionStorage.goodsCategoryArr[0].id;
        //   this.goodsCategoryId = sessionStorage.goodsCategoryArr[0].id;
        //   this.shareInit();
        //   setTimeout(() => {
        //     if (!sessionStorage.tabNum) {
        //       sessionStorage.tabNum = 3;
        //       sessionStorage.goodsCategoryId = this.goodsCategoryId
        //
        //     }
        //     this.selectTab(parseInt(sessionStorage.tabNum), 1)
        //   }, 200)
        // } else {
          //获取商品类别列表
          // this.$ajax.get('replenish/goods_category/list', res => {
          //   console.log("列别", res.data);
          //   if (res.code == '200' && res.data.length > 0) {
          //     this.goodsCategoryArr = res.data;
          //     // sessionStorage.goodsCategoryArr = JSON.stringify(res.data);
          //     this.selectTab3Item = res.data[0].id;
          //     this.goodsCategoryId = res.data[0].id;
          //   }
          //   this.shareInit();
          //   setTimeout(() => {
          //     if (!sessionStorage.tabNum) {
          //       sessionStorage.tabNum = 3;
          //       sessionStorage.goodsCategoryId = this.goodsCategoryId
          //     }
          //     this.selectTab(parseInt(sessionStorage.tabNum), 1)
          //   }, 200)
		  //
          // }, {sellerId: this.$route.query.id});

          var sellerId = this.$route.query.id ? this.$route.query.id : this.shopInfo.id
          // console.log('sellerId', sellerId)
          this.$ajax.get('goods/category/tree', res => {
            if (res.code == '200' && res.data.length > 0) {
              // var resData = res.data
              // var length = resData.length()
              // for (let i = 0; i < length; i++) {
              //   var secondChild = resData[i]['children']
              //   if (!secondChild) {
              //     continue
              //   }
              // }
              this.goodsCategoryArr = res.data;
              // sessionStorage.goodsCategoryArr = JSON.stringify(res.data);
              this.selectTab3Item = res.data[0].id;
              //console.log('res.data[0].id', res.data[0].id)
              this.goodsCategoryId = res.data[0].id;
            }
            this.shareInit();
            setTimeout(() => {
              if (!sessionStorage.tabNum) {
                sessionStorage.tabNum = 3;
                sessionStorage.goodsCategoryId = this.goodsCategoryId
              }
              this.selectTab(parseInt(sessionStorage.tabNum), 1)
            }, 200)
          }, {sellerId})
        // }
      }, 50)
    },
    mounted() {

      document.getElementsByClassName('storeBody')[0].addEventListener('click', this.clickLogin, false);

      document.getElementsByClassName('storeBody')[0].addEventListener('touchmove', this.touchMoveScroll, false)
      this.$callJava({onBackPressed: true})
      // console.log("storepage mounted", sessionStorage.askPositon)
      // this.$refs.my_scroller_tab1&&this.$refs.my_scroller_tab1.finishInfinite(true)
      window['androidCallJs'] = this.androidCallJs;
      window['onBackPressed'] = this.onBackPressed;
      // this.$callJava({onBackPressed:true})

      setTimeout(() => {
        this.$refs.my_scroller_tab3Left.$el.style.width = `1.66rem`;
      }, 200)


    },

    destroyed() {
      if (document.getElementsByClassName('storeBody')[0]) {
        document.getElementsByClassName('storeBody')[0].removeEventListener('click', this.clickLogin, false)
        document.getElementsByClassName('storeBody')[0].removeEventListener('touchmove', this.touchMoveScroll, false)
      }

      this.$callJava({onBackPressed: false})
    },
    methods: {
      // 容器滚动
      tabScroll(e) {
        console.log(e)
      },
      switchTab(val, index) {
        //console.log(val)
        this.secondCurrent = index
        // 新加
        this.pageNum = 1;
        this.noData = false;
        this.$refs.my_scroller_tab3 && this.$refs.my_scroller_tab3.finishInfinite(false);
        this.goodsCategoryId = val;
        sessionStorage.goodsCategoryId = val
        sessionStorage.tab3Positon = this.$refs.my_scroller_tab3Left && this.$refs.my_scroller_tab3Left.getPosition() && this.$refs.my_scroller_tab3Left.getPosition().top;

        this.touchMoveScroll();
        this.$refs.my_scroller_tab1.scrollTo(0, 0, false);
        this.initData(-1, val);
      },
      switchTabThree(val, index) {
        this.threeCurrent = index
        // 新加
        this.pageNum = 1;
        this.noData = false;
        this.$refs.my_scroller_tab3 && this.$refs.my_scroller_tab3.finishInfinite(false);
        this.goodsCategoryId = val;
        sessionStorage.goodsCategoryId = val
        sessionStorage.tab3Positon = this.$refs.my_scroller_tab3Left && this.$refs.my_scroller_tab3Left.getPosition() && this.$refs.my_scroller_tab3Left.getPosition().top;

        this.touchMoveScroll();
        this.$refs.my_scroller_tab1.scrollTo(0, 0, false);
        this.initData(-1, val);
      },
      // 收藏处理
      collect(e) {
        //console.log('collect', e)
      },
      clickLogin() {
        let that = this;
        //console.log("id", that.$route.query.id)
        // console.log("shopId", that.$route.query.shopId)

        if (that.$route.query.id || that.$route.query.shopId) {
          // that.$vux.toast.text(that.$route.query.id+"---"+that.$route.query.shopId, 'center');
          let params = {
            sellerId: that.$route.query.id ? that.$route.query.id : that.$route.query.shopId,
            pageNo: 1,
            pageSize: 10
          };
          // that.$ajax.get('replenish/bug_history/list', res => {
          //   if (res.code == '200') {
          //   } else {
          //     that.$vux.toast.text(res.msg, 'center');
          //   }
          // }, params)
        }
      },
      touchMoveScroll() {
        //console.log("--------1111-----")
        if (this.promise) {
          clearTimeout(this.promise)
        }
        this.isScroll = false;
        this.promise = setTimeout(() => {
          this.isScroll = true;
        }, 3000)
      },
      touchmove(e) {
        // console.log("move")
      },
      onBackPressed() {
        // this.$vux.toast.text(this.$route.path, 'center');
        if (this.$fromApp(this)) {
          if (this.$route.query.fromPush) {
            this.$callJava({code: 1007})
          } else if (this.$route.path == "/purchase/storePage") {
            this.$callJava({code: 1007})
          } else {
            this.$router.go(-1);
          }
        } else {
          this.$router.go(-1);
        }

      },
      androidCallJs(val) {
        // val={"Authorization":"eyJhbGciOiJIUzUxMiJ9.eyJqdGkiOiI3NzU4MmRlMi00MzJmLTRiNWUtOTYxNi0zZmYxMWQxYzI3MzEiLCJzdWIiOiIxMzAiLCJpc3MiOiIxMzAiLCJleHAiOjE1ODM4MTEyMTl9.I06XzfdYhMPIchagZlyethujw35AD8pv2jN441cjOtPZhakemhuSX8EYihaLbqkXf72a5F0HkdxvsDxxjdI9gQ","msg":"{\"title\":\"客户标签\",\"url\":\"http:\\\/\\\/192.168.248.41:8080\\\/#\\\/customer\\\/lable?from=app&Authorization=eyJhbGciOiJIUzUxMiJ9.eyJqdGkiOiI3NzU4MmRlMi00MzJmLTRiNWUtOTYxNi0zZmYxMWQxYzI3MzEiLCJzdWIiOiIxMzAiLCJpc3MiOiIxMzAiLCJleHAiOjE1ODM4MTEyMTl9.I06XzfdYhMPIchagZlyethujw35AD8pv2jN441cjOtPZhakemhuSX8EYihaLbqkXf72a5F0HkdxvsDxxjdI9gQ&customerId=131\",\"msg\":\"{\\\"code\\\":1003,\\\"localRefresh\\\":true,\\\"LableList\\\":[{\\\"id\\\":36,\\\"name\\\":\\\"46456456\\\",\\\"sellerId\\\":130}],\\\"buyerId\\\":\\\"131\\\"}\"}"};
        // this.$vux.toast.text(val, 'center');
        // console.log("===val", val);
        // this.$vux.toast.text("111", 'center');
        try {
          let obj = JSON.parse(val);
          if (obj.Authorization && (obj.Authorization != "" || obj.Authorization != null || obj.Authorization != undefined)) {
            Storage.set("token", obj.Authorization)
          }
        } catch (e) {
        }
      },

      isIos() {
        const u = navigator.userAgent;
        return u.indexOf("iPhone") > -1 || u.indexOf("Mac OS") > -1;
      },

      shareInit() {
        let _this = this;
        let url = "";
        if (this.isIos()) {
          url = window.location.href;
          url = url.split("#");
          url = url[0];
        } else {
          url = window.location.href;
        }

        let options = {
          url: url
        }

        this.$ajax.post('wechat/signature/jsapi', options, (res) => {
          wx.config({
            debug: false,
            appId: res.data.appId,
            timestamp: res.data.timestamp,
            nonceStr: res.data.nonceStr,
            signature: res.data.signature,
            jsApiList: [
              'checkJsApi',
              'onMenuShareTimeline',
              'onMenuShareAppMessage'
            ]
          })

          wx.ready(function () {
            wx.onMenuShareTimeline({
              title: `${_this.shopInfo.name}`, // 分享标题
              link: _this.$webUrl + 'purchase/storePage?id=' + _this.shopId,
              imgUrl: _this.shopInfo.logo || '', // 分享图标
              success: function () {
                // 用户确认分享后执行的回调函数
              },
              cancel: function () {
                // 用户取消分享后执行的回调函数
              }
            });
            wx.onMenuShareAppMessage({
              title: `${_this.shopInfo.name}`,
              desc: "这家店实在是太棒了!", // 分享描述
              link: _this.$webUrl + 'purchase/storePage?id=' + _this.shopId,
              imgUrl: _this.shopInfo.logo || '',
              success: function () {
                // 用户确认分享后执行的回调函数

              },
              cancel: function () {
                // 用户取消分享后执行的回调函数
              }
            });


          })

        })
      },
      deWeight(arr) {
        //对象数组去重
        if (arr == '' || arr == null) {
          arr = [];
        }
        const res = new Map();
        return arr.filter((a) => !res.has(a.type) && res.set(a.type, 1));
      },
      selectTab(val, auto) {
        if (val == 4) {
          this.activeStatus = true
          this.current = ''
          this.selectTab3Item = null
        }
        this.hisTabNum = this.tabNum;
        // console.log(val, this.hisTabNum)
        this.noData = false;
        this.tabDataArr = [];
        this.pageNum = 1;
        sessionStorage.tabNum = val;
        this.goodsCategoryId = '';
        this.$refs.my_scroller_tab1.finishInfinite(false);
        this.tabNum = val;
        this.isScroll = true;

        let currentPosition = this.$refs.my_scroller_tab1 && this.$refs.my_scroller_tab1.getPosition() && this.$refs.my_scroller_tab1.getPosition().top;
        //console.log(this.hisTabNum, currentPosition)
        // console.log("val", val)

        if (this.hisTabNum == 1) {
          sessionStorage.tab1ContentP = currentPosition ? currentPosition : 0;
        } else if (this.hisTabNum == 2) {
          sessionStorage.tab2ContentP = currentPosition ? currentPosition : 0;
        } else if (this.hisTabNum == 3) {
          // if(currentPosition&&currentPosition>20){
          if (!auto) {
            sessionStorage.tab3ContentP = currentPosition ? currentPosition : 0;
          }
          // }
        } else {
          sessionStorage.tab4ContentP = currentPosition ? currentPosition : 0;
        }

        if (val == 3) {
          this.selectTab3Item = this.goodsCategoryId = sessionStorage.goodsCategoryId ? sessionStorage.goodsCategoryId : this.selectTab3Item;
        }
      },
      goManage() {
        if (this.$fromApp(this)) {
          this.$callJava({code: 1007})
        } else {
          if (this.fromManage == 1) {
            // this.$router.push('/purchase')
            this.$router.go(-1);
          } else {
            this.$callJava({code: 1007})
          }
        }
      },
      shareQR() {
        this.popover = !this.popover;
        this.shopInfo.linkUrl = this.linkURL;
        this.$callJava({
          code: 1008,
          shopName: this.shopInfo.name,
          shareLink: this.linkURL,
          shopLogo: this.shopInfo.logo
        })
      },
      shareLink() {
        this.popover = !this.popover;
        this.shopInfo.linkUrl = this.linkURL;
        this.$callJava({
          code: 1009,
          shopName: this.shopInfo.name,
          shareLink: this.linkURL,
          shopLogo: this.shopInfo.logo
        })
      },
      callUser() {
        if (Storage.get("token")) {
          if (this.$fromApp(this)) {
            this.$callJava({code: 1001, phone: this.shopInfo.phone})
          } else {
            window.location.href = "tel:" + this.shopInfo.phone;
          }
        }
      },
      goShopInfo() {
        if (Storage.get("token")) {
          if (this.$fromApp(this)) {
            // this.$router.push({path:'/shop/info',query:{shopId:this.shopId,from:'app'}})
            this.$callJava({url: this.$webUrl + "shop/info?from=app&shopId=" + this.shopId, title: '店铺详情'})
          } else {
            this.$router.push({path: '/shop/info', query: {shopId: this.shopId}})
          }
        }
      },
      searchInput() {
        if (this.$fromApp(this)) {
          this.$router.push({
            path: '/purchase/searchAndResult',
            query: {shopId: this.shopId, zeroSaleState: this.shopZeroSaleState, from: 'app'}
          })
          this.$callJava({code: 1011})
        } else {
          this.$router.push({
            path: '/purchase/searchAndResult',
            query: {shopId: this.shopId, zeroSaleState: this.shopZeroSaleState}
          })
        }
      },
      selectTab3Items(val, index) {
        //console.log("sellectTab3")
        this.activeStatus = false
        this.current = index
        this.pageNum = 1;
        this.noData = false;
        this.$refs.my_scroller_tab3 && this.$refs.my_scroller_tab3.finishInfinite(false);
        if (this.selectTab3Item != val) {
          this.selectTab3Item = val;
          this.goodsCategoryId = val;
          sessionStorage.goodsCategoryId = val
          sessionStorage.tab3Positon = this.$refs.my_scroller_tab3Left && this.$refs.my_scroller_tab3Left.getPosition() && this.$refs.my_scroller_tab3Left.getPosition().top;

          this.touchMoveScroll();
          this.$refs.my_scroller_tab1.scrollTo(0, 0, false);
          this.initData(-1, this.selectTab3Item);
        } else {
          // console.log('same modal')
        }
      },
      getScroll() {
        let position = 0;
        if (this.tabNum == 1 && sessionStorage.tab1ContentP) {
          position = sessionStorage.tab1ContentP
        } else if (this.tabNum == 2 && sessionStorage.tab2ContentP) {
          position = sessionStorage.tab2ContentP
        } else if (this.tabNum == 4 && sessionStorage.tab4ContentP) {
          position = sessionStorage.tab4ContentP
        }


        if (this.tabNum == 3 && sessionStorage.tab3ContentP) {
          setTimeout(() => {
            if (this.$refs.my_scroller_tab3Left)
              this.$refs.my_scroller_tab3Left.scrollTo(0, sessionStorage.tab3Positon, false);
            if (this.$refs.my_scroller_tab1 && this.isScroll) {
              console.log("---sessionStorage.tab3ContentP--", this.isScroll)
              this.$refs.my_scroller_tab1.scrollTo(0, sessionStorage.tab3ContentP, false);
            }
          }, 80)
        } else {
          setTimeout(() => {
            if (this.$refs.my_scroller_tab1 && this.isScroll) {
              console.log("getScroll", position)
              this.$refs.my_scroller_tab1.scrollTo(0, position, false);
            }
          }, 50)
        }
      },
      initData(val, type = '', name = '', done) {
        let params = {
          goodsName: name,
          orderType: val,
          goodsCategoryId: type,
          sellerId: this.shopId,
          pageNo: this.pageNum,
          pageSize: 10
        }
        this.$ajax.get('replenish/search_goods/list', res => {
          //this.$vux.toast.text(res.msg, 'center');
          if (res.code == 200) {
            // console.log(res)
            for (let i = 0; i < res.data.length; i++) {
              for (let j = 0; j < res.data[i].unitVOList.length; j++) {
                if (!res.data[i].unitVOList[j].shoppingCartVO) {
                  res.data[i].unitVOList[j].shoppingCartVO = {num: 0}
                }
                if (this.shopZeroSaleState == 0 && res.data[i].zeroSaleFlag == 0) {
                  res.data[i].unitVOList[j].stockFlag = false;
                } else {
                  if (res.data[i].unitVOList[j].shoppingCartVO.num >= res.data[i].unitVOList[j].goodsStock) {
                    res.data[i].unitVOList[j].stockFlag = true;
                  } else {
                    res.data[i].unitVOList[j].stockFlag = false;
                  }
                }
              }
            }

            if (res.data) {
              this.tabDataArr = this.pageNum == 1 ? res.data : this.tabDataArr.concat(res.data);
              this.pageNum++;
              if (this.isScroll) {
                console.log("scroll", this.isScroll)
                this.getScroll();
              }
            }

            if (typeof (done) == "function") {
              done();
            }

            this.$refs.my_scroller_tab1 && this.$refs.my_scroller_tab1.finishPullToRefresh();

            if (!res.data || res.data.length < 10) {
              this.noData = true;
              if (this.$refs.my_scroller_tab1) {
                this.$refs.my_scroller_tab1.finishInfinite(true);
              }
            }

            console.log("tabData", this.tabDataArr)


          } else {
            // this.$vux.toast.text(res.msg, 'center');
          }

        }, params)
      },

      inputCountFn(val, item) {

        this.$vux.confirm.show({
          title: '请输入商品数量',
          value: true,
          "showInput": true,
          "inputAttrs": {type: "number"},
          onCancel: () => {

          },
          onConfirm: (e) => {
            if (this.$checkIsNumber(e)) {
              if (e.length > 8) {
                this.$vux.toast.text("最多输入8位", 'center');
                return
              }
              this.$ajax.post('replenish/shopping_cart/setting', {
                goodsId: val.unitGoodsPricesVO.goodsId,
                unitId: val.unitGoodsPricesVO.unitId,
                num: e
              }, res => {
                if (res.code == 200) {
                  this.$root.eventHub.$emit('updateCart')
                  val.shoppingCartVO.num = e;

                  if (this.shopZeroSaleState == 0 && item.zeroSaleFlag == 0) {
                    val.stockFlag = false;
                  } else {
                    if (val.shoppingCartVO.num >= val.goodsStock) {
                      val.stockFlag = true;
                    } else {
                      val.stockFlag = false;
                    }
                  }
                } else {
                  this.$vux.toast.text(res.msg, 'center');
                }
              })
            } else {
              this.$vux.toast.text("请输入正整数", 'center');
            }
          }
        })
      },
      showPopover() {
        this.popover = !this.popover
      },
      refresh1() {
        this.$refs.my_scroller_tab3Left && this.$refs.my_scroller_tab3Left.finishPullToRefresh();
      },
      infinite1() {
        this.$refs.my_scroller_tab3Left && this.$refs.my_scroller_tab3Left.finishInfinite(true)
      },
      refresh() {
        this.pageNum = 1;
        this.noData = false;
        if (this.tabNum == 2) {
          sessionStorage.tab2ContentP = 0
          this.initData(1, this.goodsCategoryId);
        } else if (this.tabNum == 1) {
          sessionStorage.tab1ContentP = 0
          this.initData(0, this.goodsCategoryId);
        } else if (this.tabNum == 3) {
          sessionStorage.tab3ContentP = 0
          this.initData(-1, this.goodsCategoryId);
        } else {
          sessionStorage.tab4ContentP = 0
          this.initData(2, this.goodsCategoryId);
        }

      },
      infinite(done) {
        console.log("infinite")
        if (!this.noData) {
          setTimeout(() => {
            if (this.isLoad) {
              this.$refs.my_scroller_tab1.finishInfinite(true);
              this.isLoad = false;
            } else {
              switch (this.tabNum) {
                case 1:
                  this.initData(0, this.goodsCategoryId, '', done);
                  break;
                case 2:
                  this.initData(1, this.goodsCategoryId, '', done);
                  break;
                case 3:
                  this.initData(-1, this.goodsCategoryId, '', done);
                  break;
                case 4:
                  this.initData(2, this.goodsCategoryId, '', done);
                  break;
              }
            }
          }, 100)

        } else {
          this.$refs.my_scroller_tab1.finishInfinite(true);
        }

      },

      // infinite(done){
      //   console.log("infinite")
      //   // if(this.firstOpen){
      //   //   this.$refs.my_scroller_tab1&&this.$refs.my_scroller_tab1.finishInfinite(true)
      //   //   this.firstOpen=false;
      //   //   return;
      //   // }
      //   // setTimeout(()=>{
      //     if(!this.noData){
      //       // this.pageNum++;
      //       switch (this.tabNum) {
      //         case 1:
      //           this.initData(0,1,this.goodsCategoryId,'',done);
      //           break;
      //         case 2:
      //           this.initData(1,1,this.goodsCategoryId,'',done);
      //           break;
      //         case 3:
      //           this.initData(0,1,this.goodsCategoryId,'',done);
      //           break;
      //         case 4:
      //           this.initData(2,1,this.goodsCategoryId,'',done);
      //           break;
      //       }
      //     }else{
      //         this.$refs.my_scroller_tab1&&this.$refs.my_scroller_tab1.finishInfinite(true)
      //     }
      //   // },600)
      // }
    }
  }
</script>

<style type="text/less" lang="less" scoped>
  .storeContent{
    .right{
      padding: .15rem;
      background: #fcfcfc;
      flex: 1;
      overflow-x: auto;
      white-space: nowrap;
      .item{
        height: .52rem;
        display: inline-block;
        width: fit-content;
        color: #FFFFFF;
        padding: 0 .28rem;
        line-height: .52rem;
        background: rgba(70,130,255,.34);
        border-radius: .26rem;
        margin-right: 10px;
      }
      .active{
        background: rgba(70,130,255,1);
      }
    }
  }
  .storeHeadBottom.new{
    margin: .15rem 0!important;
    margin-bottom: 0!important;
    background: #FFFFFF;
    &.active{
      .left{
        background: #FFFFFF;
      }
      .selectIcon{
        background-color: rgb(82, 125, 217);
      }
    }
    .left{
      width: 1.66rem;
      padding: .15rem 0;
      background: #F5F5F5;
    }
    .selectIcon {
      display: inline-block;
      width: .1rem;
      height: .3rem;
      margin-right: .15rem;
      /*background-color: rgb(82, 125, 217);*/
    }
    .right{
      padding: .15rem;
      flex: 1;
      overflow-x: auto;
      white-space: nowrap;
      .item{
        height: .52rem;
        display: inline-block;
        width: fit-content;
        color: #FFFFFF;
        padding: 0 .28rem;
        line-height: .52rem;
        background: rgba(70,130,255,.34);
        border-radius: .26rem;
        margin-right: 10px;
      }
      .active{
        background: rgba(70,130,255,1);
      }
    }
  }
  ul > li {
    list-style: none;
  }

  input {
    -webkit-appearance: none;
  }

  .tabNav {
    position: fixed;
    bottom: 0px;
    left: 0px;
    display: flex;
    flex-direction: row;
  }

  .storeBody {
    height: 100%;
    padding-bottom: .1rem;
    box-sizing: border-box;
    background-color: #FFFFFF;

    .storeHead {
      width: 100%;
      /*height: 2.45rem;*/
      background-color: #F0F1F3;

      .tongzhi {
        margin-left: .4rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: .1rem;

        img {
          height: .32rem;
          width: .4rem;
        }

        span {
          color: #333333;
          font-size: .28rem;
          margin-left: .1rem;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }

      .storeHeadTop {
        margin: 0 .3rem;
        height: .8rem;
        line-height: 1rem;

        .storeHeadL {
          p {
            margin-right: .2rem;
            color: #333333;
            font-size: 16px;
            font-weight: bold;
            width: 4.2rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .callUser {
            width: 1.34rem;
            height: .38rem;
            background: #517dd9;
            border-radius: .2rem;
            font-size: 12px;
            text-align: center;
            color: #fff;
            /*
            color: #8E919F;
            font-size: 12px;
            width: 1.26rem;
            height: .32rem;
            line-height: .32rem;
            text-align: center;
            border-radius: .16rem;
            border: 1px solid #8E919F;*/
          }

          img {
            width: .18rem;
            height: .34rem;
            padding-right: .2rem;
          }
        }

        .storeHeadR {
          position: relative;

          img {
            width: .48rem;
            height: .48rem;
          }

          .popover {
            position: absolute;
            left: -2.5rem;
            bottom: -1.9rem;
            width: 3rem;
            height: 2.02rem;
            background-color: #000000;
            border-radius: .08rem;
            opacity: 0.7;
            color: #FFFFFF;
            z-index: 10000;

            img {
              width: .4rem;
              height: .4rem;
            }
          }
        }
      }

      .storeMiddle {
        margin: .1rem .3rem;

        .searchInput {
          width: 100%;
          height: .64rem;
          text-indent: .3rem;
          border-radius: .32rem;
          outline: none;
          border: none;
          font-size: 15px;
        }

        .searchInput::placeholder {
          color: #c6c6c6;
          font-size: 15px;
          font-family: "iconfont" !important;
        }

        .searchInput::-moz-placeholder {
          color: #c6c6c6;
          font-size: 15px;
          font-family: "iconfont" !important;
        }

        .searchInput::-webkit-input-placeholder {
          color: #c6c6c6;
          font-size: 15px;
          font-family: "iconfont" !important;
        }
      }

      .storeHeadBottom {
        margin: 0.15rem .3rem 0 .3rem;

        p {
          height: .4rem;
          line-height: .4rem;
          font-size: 14px;
          border-radius: .2rem;
          padding: 0 .2rem;
          margin-right: .3rem;
        }
      }
    }

    .storeContent {
      .tab {
        .scrollerStyle {
          .shopList {
            .shopListItem {
              width: 7.2rem;
              margin-left: .3rem;
              border-bottom: 1px solid #EBEBEB;
              padding-bottom: .2rem;

              .shopItemLeft {
                width: 2.4rem;
                position: relative;

                img {
                  width: 1.84rem;
                  height: 1.84rem;
                  margin-top: .25rem;
                }

                ul {
                  position: absolute;
                  top: .2rem;
                  left: 0;

                  li {
                    margin-right: .1rem;
                    color: #FFFFFF;
                    font-size: 12px;
                    background-color: #FC6E51;
                    padding: .03rem .08rem;
                  }
                }
              }

              .shopItemRight {
                width: 4.8rem;

                .goodsName {
                  color: #333333;
                  font-size: 15px;
                  /*height: .8rem;*/
                  margin: .2rem 0 .1rem;
                  /*line-height: .8rem;*/

                  span {
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    width: 4.7rem;
                  }
                }

                .indent {
                  height: .6rem;
                  padding-right: .3rem;

                  .goodsPackPrice {
                    color: #FB6E52;

                    span {
                      font-size: 12px;
                    }

                    p {
                      font-size: 18px;
                    }
                  }

                  .goodsDetail {
                    color: #999999;
                    height: .32rem;
                    line-height: .32rem;
                    background-color: #EEEEEE;
                    border-radius: .16rem;
                    padding: 0 .15rem;
                    margin-top: .05rem;
                    font-size: 10px;
                  }

                  .operation {
                    img {
                      width: .46rem;
                      height: .46rem;
                    }

                    p {
                      margin: 0 .1rem;
                      width: .6rem;
                      height: .5rem;
                      border-radius: 2px;
                      background-color: #EEEEEE;
                    }
                  }
                }

                .packPriceAndShopping {
                  margin-top: .1rem;
                  border-bottom: 1px solid #EBEBEB;
                }

                .packPriceAndShopping:last-child {
                  border-bottom: none;
                }
              }
            }
          }
        }
      }

      .tab3 {
        height: 100%;

        .tab3L {
          width: 1.66rem;
          background-color: #F7F7F7;

          p {
            height: 1.1rem !important;
            /*line-height: 1.1rem;*/
            font-size: 15px;

            .selectIcon {
              display: inline-block;
              width: .1rem;
              height: .3rem;
              margin-right: .15rem;
            }

            span {
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
              width: 1.5rem;
            }
          }
        }

        .tab3R {
          width: 5.84rem;
          overflow-y: auto;

          .shopList {
            .shopListItem {
              width: 5.5rem;
              margin-left: -1.34rem;
              border-bottom: 1px solid #EBEBEB;
              padding-bottom: .2rem;

              .shopItemLeft {
                width: 2rem;
                position: relative;

                img {
                  width: 1.84rem;
                  height: 1.84rem;
                  margin-top: .25rem;
                }

                ul {
                  position: absolute;
                  top: .2rem;
                  left: 0;

                  li {
                    margin-right: .1rem;
                    color: #FFFFFF;
                    font-size: 12px;
                    background-color: #FC6E51;
                    padding: .03rem .08rem;
                  }
                }
              }

              .shopItemRight {
                width: 3.5rem;

                .goodsName {
                  color: #333333;
                  font-size: 14px;
                  /*height: .8rem;*/
                  margin: .2rem 0 .1rem;
                  /*line-height: .8rem;*/

                  span {
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    width: 3.4rem;
                  }
                }

                .indent {
                  height: .6rem;
                  padding-right: .3rem;

                  .goodsPackPrice {
                    color: #FB6E52;

                    span {
                      font-size: 12px;
                    }

                    p {
                      font-size: 18px;
                    }
                  }

                  .goodsDetail {
                    color: #999999;
                    height: .32rem;
                    line-height: .32rem;
                    background-color: #EEEEEE;
                    border-radius: .16rem;
                    padding: 0 .1rem;
                    margin-top: .05rem;
                    font-size: 10px;
                  }

                  .operation {
                    img {
                      width: .46rem;
                      height: .46rem;
                    }

                    p {
                      margin: 0 .1rem;
                      width: .6rem;
                      height: .5rem;
                      border-radius: 2px;
                      background-color: #EEEEEE;
                    }
                  }
                }

                .packPriceAndShopping {
                  margin-top: .1rem;
                  border-bottom: 1px solid #EBEBEB;
                }

                .packPriceAndShopping:last-child {
                  border-bottom: none;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
